<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蘑菇街商城--商品列表页面</title>
    <meta name="keywords" content="上衣类目频道首页图墙价格、上衣类目频道首页图墙评价、上衣类目频道首页图墙品牌、上衣类目频道首页图墙搭配、上衣类目频道首页图墙新款、上衣类目频道首页图墙图片，导购、优惠、特价，女装，上衣">
    <link rel="stylesheet" href="./css/reset.css">
    <meta name="description" content="欢迎来到蘑菇街上衣类目频道首页图墙 上衣频道，上万精通上衣类目频道首页图墙挑款的达人为您提供上衣类目频道首页图墙价格、上衣类目频道首页图墙优惠、上衣类目频道首页图墙评价、上衣类目频道首页图墙品牌、上衣类目频道首页图墙搭配、上衣类目频道首页图墙新款、上衣类目频道首页图墙排行等信息。过亿购物达人在蘑菇街发现最流行的上衣类目频道首页图墙、明星抖音网红同款上衣类目频道首页图墙，分享上衣类目频道首页图墙购物经验、笔记。买上衣类目频道首页图墙，先逛蘑菇街。">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/list.css">
    <link rel="stylesheet" href="./css/pagination.css">
    <script src="./script/main.js" type="module" id="list"></script>
</head>

<body>
    <!-- 顶部区域结构 -->
    <header>
        <!-- 头部导航区域 -->
        <div class="h_nav">
            <div class="container">
                <div class="h_content">
                    <a href="index1.html" class="nav_item"><i></i>首页</a>
                    <a href="" class="nav_item" target="_blank"><i></i>商城</a>
                    <a href="" class="nav_item" target="_blank">我的订单</a>
                    <div class="h_about nav_item" target="_blank">关于我们<i class="icon_down"></i></div>
                </div>
            </div>
        </div>
        <!-- 头部主体区域 -->
        <div class="h_con">
            <div class="container clearfix">
                <a href="javascript:;" id="top_logo" title="蘑菇街首页" class="fl">
                    <img src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt="蘑菇街，我的买手街">
                </a>
                <div class="h_category fl">
                    <i></i> 目录
                </div>
                <div class="search_content fl">
                    <!-- 搜索框 -->
                    <div class="h_search fl">
                        <form action="" method="get" class="top_nav_form clearfix">
                            <input type="text" placeholder="连衣裙" class="sc_text fl">
                            <input type="submit" class="sc_btn fl" value="">
                        </form>
                        <div class="top_nav_tip">
                            <ul></ul>
                        </div>
                    </div>

                    <!-- 导航信息 -->
                    <div class="h_news fl">
                        <!-- 消息 -->
                        <div class="top_news">
                            <a href="javascript:;" class="news">
                                <i></i>
                                <span>消息</span>
                            </a>
                            <a href="javascript:;" class="collection">
                                <i></i>
                                <span>收藏</span>
                            </a>
                            <a href="cartlist.html" class="buycar">
                                <i></i>
                                <span>购物车</span>
                            </a>
                        </div>
                    </div>

                    <!-- 登录注册以及用户信息和退出 -->
                    <div class="h_inform fl">
                        <a href="./registry.html" class="register" style="display: none;">
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png" alt=""> 注册
                        </a>
                        <a href="./login.html" style="display: none;" class="login">
                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png" alt=""> 登录
                        </a>
                        <span class="username">
                            <strong>欢迎您!!!</strong>
                            <i></i>
                        </span>
                        <a href="javascript:;" class="backlogin">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 渲染数据主体展示区域结构 -->
    <div class="container">


        <!-- 加载分页插件的结构  -- 重点是: page -->
        <div class="pagelist">
            <!-- 列表页排序按钮 -->
            <div class="sort">
                <button>默认排序</button>
                <button>价格升序</button>
                <button>价格降序</button>
            </div>
            <div class="m-style page"></div>
        </div>

        <!-- 数据列表动态渲染区域 -->
        <ul class="render">
            <!-- <li>
                <a href="" class="render_data">
                    <img src="" alt="" class="render_img">
                    <p>短袖女新款超火纯棉小款上衣女夏短款高腰牛油果绿t恤ins潮衣服啊nihaoaqqqqq</p>
                    <span class="render_price">￥39.9</span>
                    <span class="render_salenum"><img
                            src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
                            alt="">
                        <strong>1234</strong></span>
                </a>
            </li>
             -->
        </ul>


    </div>

    <!-- 底部区域结构 -->
    <footer class="foot">
        <div class="container">
            <div class="f_conbox">
                <!-- 底部图标 -->
                <div class="f_icon">
                    <a href="javascript:;">
                        <img src="https://s10.mogucdn.com/mlcdn/c45406/181112_4a8ch8fac2i12ib313hif4da35ed3_280x76.png" alt="">
                    </a>
                </div>
                <!-- 底部帮助栏目 -->
                <div class="f_help clearfix">
                    <dl class="fl">
                        <dt>新手帮助
                            <p class="f_help_border"></p>
                        </dt>
                        <dd>
                            <a href="javascript:;">常见问题</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">自动服务</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">联系客服</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">意见反馈</a>
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>权益保障
                            <p class="f_help_border"></p>
                        </dt>
                        <dd>
                            <a href="javascript:;">全国包邮</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">7天无理由退货</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">退货运费补贴</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">限时发货</a>
                        </dd>
                    </dl>
                    <dl class="fl">
                        <dt>支付方式
                            <p class="f_help_border"></p>
                        </dt>
                        <dd><a href="javascript:;">微信支付</a></dd>
                        <dd><a href="javascript:;">支付宝</a></dd>
                        <dd><a href="javascript:;">白付美支付</a></dd>
                    </dl>
                    <dl class="fl">
                        <dt>移动客户端下载
                            <p class="f_help_border"></p>
                        </dt>
                        <dd><a href="javascript:;">蘑菇街</a></dd>
                        <dd><a href="javascript:;">美丽说</a></dd>
                        <dd><a href="javascript:;">uni引力</a></dd>
                    </dl>
                </div>
                <!-- 底部关于项 -->
                <div class="f_about">
                    <ul>
                        <li>
                            <a href="javascript:;">关于我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">招聘信息</a>
                        </li>
                        <li>
                            <a href="javascript:;">联系我们</a>
                        </li>
                        <li>
                            <a href="javascript:;">商家入驻</a>
                        </li>
                        <li>
                            <a href="javascript:;">商家后台</a>
                        </li>
                        <li>
                            <a href="javascript:;">规则中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">规则众议院</a>
                        </li>
                        <li>
                            <a href="javascript:;">有害信息举报</a>
                        </li>
                        <li>
                            <a href="javascript:;">用户隐私保护</a>
                        </li>
                    </ul>
                </div>
                <!-- 底部商家公司名称 -->
                <div class="footer_hostname"><span>©2020 Mogu.com 杭州卷瓜网络有限公司</span></div>
            </div>
        </div>
    </footer>
</body>

</html>